<template>
    <div id="topBanner">
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in state.swiperList" :key="image">
              <img :src="image.pic" />
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
import { onMounted ,reactive } from 'vue';
// 引入接口
import {banner} from '@/api/index'
export default {
  setup() {

    const state = reactive({
        swiperList : []
    });

    onMounted(()=>{
        let Swiper =async () =>{
            let swiperss =await banner()
            // 获取的数据
            // console.log(swiperss.data.banners);
            state.swiperList = swiperss.data.banners
        }
        Swiper();

    });
    return { state };

  },
};
</script>

<style lang="scss" scoped>
#topBanner{ 
    padding:0 0.2rem;
    .van-swipe{
        width: 100%;
        border-radius: .4rem;
        .van-swipe__track{
            .van-swipe-item{
                img{
                    width: 100%;
                    height: 3.5rem;
                }
            }
        }
    }
    //深层次选择器：:deep(类名)
    :deep(.van-swipe__indicator--active){
        background-color: rgb(219, 130, 130);
    }
}
</style>